<template>
  <div class="content" id="content">
    <header>
      <div class="header-left">
        <img src="../../assets/images/logo1.png" alt="" />
        <span>法律合规风险全景图</span>
      </div>
      <div class="header-right" @click="backHomepage">
        <img src="../../assets/images/shouye.png" alt="" />
        <span>返回首页</span>
      </div>
    </header>
    <div class="content-menu" v-if="type">
      <div class="menu-input">
        <div class="input-item">
          <el-select v-model="areas" clearable placeholder="请选择合规领域" @change="changeComplianceArea">
            <el-option v-for="item in complianceArea" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </div>
        <div class="input-item">
          <el-select v-model="queModule" placeholder="请选择合规子领域" clearable>
            <el-option v-for="item in complianceEssentials" :key="item.id" :label="item.title" :value="item.title"></el-option>
          </el-select>
        </div>
        <div class="input-item">
          <el-input v-model="associationNumber" placeholder="请输入风险编号"></el-input>
        </div>
        <div class="input-item">
          <el-input v-model="riskWarning" placeholder="请输入合规义务 "></el-input>
        </div>
        <div class="input-item">
          <el-input v-model="respPost" placeholder="请输入合规责任岗位"></el-input>
        </div>
        <div class="input-item">
          <el-input v-model="supervisePost" placeholder="请输入合规监督岗位"></el-input>
        </div>
      </div>
      <div class="menu-btn">
        <el-button type="primary" @click="searchBtn">搜索</el-button>
        <el-button type="text" @click="reset">重置</el-button>
      </div>
    </div>
    <div class="content-body">
      <div class="body-table">
        <div class="table-header">
          <div class="header-title">合规风险</div>
          <div class="header-exportData" @click="exportData" v-if="exportPermission">
            <img src="@/assets/images/daochu.png" alt="" />
            导出数据
          </div>
        </div>
        <div class="table-form">
          <el-table :data="tableData" border style="width: 100%" :max-height="800" :span-method="objectSpanMethod">
            <!--序号翻页累加-->
            <el-table-column type="index" width="60" label="序号" align="center" :index="(page - 1) * rows + 1"></el-table-column>
            <el-table-column prop="areas" label="合规领域" width="120" align="center"></el-table-column>
            <el-table-column prop="queModule" label="合规子领域" width="120" align="center"></el-table-column>
            <el-table-column prop="queName" label="合规要点" width="140" align="center">
              <template slot-scope="{ row }">
                <div @click="particulars(row)" class="particulars">{{ row.queName }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="riskWarning" label="合规义务" min-width="140" align="center">
              <template slot-scope="{ row }">
                <div :title="formattingHtml(row.riskWarning)" class="show-overflow">{{ formattingHtml(row.riskWarning) }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="respContent" label="违规风险" min-width="160" align="center">
              <template slot-scope="{ row }">
                <div :title="formattingHtml(row.respContent)" class="show-overflow" v-html="row.respContent"></div>
              </template>
            </el-table-column>
            <el-table-column prop="respPost" label="合规责任岗位" width="70" align="center">
              <template slot-scope="{ row }">
                <div :title="formattingHtml(row.respPost)" class="show-overflow-10">{{ row.respPost }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="supervisePost" label="合规监督岗位" width="70" align="center">
              <template slot-scope="{ row }">
                <div :title="formattingHtml(row.supervisePost)" class="show-overflow-10">{{ row.supervisePost }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="qaLawRegulationsList" label="法律法规" min-width="190" align="center" show-overflow-tooltip>
              <template slot-scope="{ row }">
                <template v-for="item in row.qaLawRegulationsList">
                  <a class="file-url" :href="item.url" target="_blank" v-if="item.url">{{ item.name }}</a>
                  <p v-else class="show-overflow-1">{{ item.name }}</p>
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="managementSystem" label="管理制度" min-width="140" align="center">
              <template slot-scope="{ row }">
                <div :title="formattingHtml(row.managementSystem)" class="show-overflow" :style="{ textAlign: row.managementSystem.length > 1 ? 'start' : 'center' }">
                  {{ formattingHtml(row.managementSystem) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="controlPointNumber" label="省公司控制点编号" width="160" align="center">
              <template slot-scope="{ row }">
                <template>
                  <a
                    v-if="row.controlPointNumber.length > 1"
                    class="file-url"
                    style="text-align: center"
                    :href="attachmentAddress"
                    target="_blank"
                    >{{ row.controlPointNumber }}</a
                  >
                  <p v-else>{{ row.controlPointNumber }}</p>
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="qaComplianceAdviceList" label="合规指引" min-width="190" align="center" show-overflow-tooltip>
              <template slot-scope="{ row }">
                <template v-for="item in row.qaComplianceAdviceList">
                  <a class="file-url" :href="item.url" target="_blank" v-if="item.url">{{ item.name }}</a>
                  <p v-else class="show-overflow-1">{{ item.name }}</p>
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="qaTypicalCaseList" label="典型案例" min-width="190" align="center" show-overflow-tooltip>
              <template slot-scope="{ row }">
                <template v-for="item in qaTypicalCaseListSort(row.qaTypicalCaseList)">
                  <a class="file-url" :href="item.url" target="_blank" v-if="item.url">{{ item.name }}</a>
                  <p v-else class="show-overflow-1">{{ item.name }}</p>
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="associationNumber" label="风险全景图关联编号" min-width="160" align="center"></el-table-column>
          </el-table>
          <div class="form-paging">
            <el-pagination
              @current-change="handleCurrentChange"
              @size-change="sizeChange"
              :current-page.sync="page"
              :page-size="rows"
              :page-sizes="[10, 20, 50, 100]"
              layout="sizes,prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { download, getAllPostComplianceList, getMineRelatePostComplianceList } from "@/api";
import { hotZoneCoordinates } from "@/utils/hotZoneCoordinates";
import API from "components/api-chat-window";
import windowConst from "@/utils/const";
export default {
  data() {
    return {
      page: 1, //默认当前页码
      rows: 10, //每页默认数据量
      total: 0, //总条数
      areas: "", //合规领域选择的值
      complianceArea: [], //合规领域
      queModule: "", //合规子领域选择的值
      complianceEssentials: [], //合规要点
      associationNumber: "", //行为编号
      riskWarning: "", //合规义务
      respPost: "", //合规责任岗位
      supervisePost: "", //合规监督岗位
      tableData: [], //表格数据
      type: true, //默认为全部风景图
      exportPermission: false, //导出权限
      attachmentAddress: windowConst.VUE_APP_ATTACHMENT_ADDRESS, //附件地址
    };
  },
  methods: {
    /**
     * 重置参数
     */
    resetParameter() {
      this.areas = ""; //合规领域选择的值
      this.queModule = ""; //合规子领域选择的值
    },
    /**
     * 典型案例子项排序
     * @param value 子项集合
     * @returns {*} 排序后的值
     */
    qaTypicalCaseListSort(value) {
      /**
       * 处理并转换输入的值数组。
       * @param {Array} value - 待处理的值数组，数组中的每一项应包含一个name属性。
       * @returns {Array} 返回处理后的值数组，其中如果元素的name属性以\n开头，则移除该开头。
       */
      const data = value.map((item) => {
        if (item.name.startsWith("\n")) {
          //当前数据的开头为\n，删除
          item.name = item.name.substring(1);
        }
        return item;
      });
      /**
       * 根据数据名称中的数字进行排序
       * @param {Array} data - 待排序的数据数组，每个元素包含一个名称属性
       * @returns {Array} - 排序后的数据数组
       */
      return data.sort((a, b) => {
        const regex = /^\d+/; //正则表达式匹配数字
        const front = Number(a.name.match(regex)[0]); //取前一个数据的开头的数字
        const behind = Number(b.name.match(regex)[0]); //取后一个数据的开头的数字
        // 比较两个数字并返回比较结果
        if (front > behind) {
          return 1;
        } else if (front < behind) {
          return -1;
        } else {
          return 0;
        }
      });
    },
    /**
     * 改变每页显示条数
     * @param value 每页显示条数
     */
    sizeChange(value) {
      this.rows = value;
      this.search();
    },
    /**
     * 详情跳转
     */
    particulars(row) {
      const routeData = this.$router.resolve({
        path: "/riskDetail",
        query: { bankNo: row.bankNo },
      });
      window.open(routeData.href, "_blank");
    },
    /**
     * 权限信息
     */
    async jurisdiction() {
      const data = await API.getUserAuth(); //请求权限信息
      this.exportPermission = data.data.filter((item) => item.name === "全景图导出").length > 0; //判断是否拥有全景图导出权限
    },
    /**
     * 行合并方法
     * @param row 当前行
     * @param column 当前列
     * @param rowIndex 行号
     * @param columnIndex 列号
     * @returns {{colspan: number, rowspan: number}}
     */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //定义需要合并的列字段，有哪些列需要合并，就自定义添加字段即可
      const fields = ["areas"];
      // 当前行的数据
      const cellValue = row[column.property];
      // 判断只合并定义字段的列数据
      if (cellValue && fields.includes(column.property)) {
        const prevRow = this.tableData[rowIndex - 1]?.[column.property]; //上一行数据
        const nextRow = {
          value: this.tableData[rowIndex + 1]?.[column.property],
        }; //下一行数据
        // 当上一行的数据等于当前行数据时，当前行单元格隐藏
        if (prevRow && prevRow === cellValue) {
          return { rowspan: 0, colspan: 0 };
        } else {
          // 反之，则循环判断若下一行数据等于当前行数据，则当前行开始进行合并单元格
          const countRowspan = {
            value: 1,
          }; //用于合并计数多少单元格
          // 循环查找下一行的区域值是否与当前行相同
          while (nextRow.value && nextRow.value === cellValue) {
            nextRow.value = this.tableData[++countRowspan.value + rowIndex]?.[column.property];
          }
          // 判断跨行数是否大于1
          if (countRowspan.value > 1) {
            return { rowspan: countRowspan.value, colspan: 1 };
          }
        }
      }
    },
    /**
     * 下载
     * @param data
     * @param fileName
     */
    downLoad(data, fileName) {
      const filename = fileName;
      const blob = new Blob([data]);
      const href = window.URL.createObjectURL(blob);
      // 兼容 ie
      const link = document.createElement("a");
      link.style.display = "none";
      link.href = href;
      link.download = decodeURIComponent(filename);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(link);
    },
    /**
     * 分页
     * @param val
     */
    handleCurrentChange(val) {
      this.page = val; //修改页数
      this.search(); //查询
    },
    /**
     * 返回首页
     */
    backHomepage() {
      this.$router.push({ name: "newPanorama" });
    },
    /**
     * 页面初始化
     */
    parameter() {
      //当点击我的合规清单时
      switch (this.$route.query.title) {
        case "我的合规清单":
          this.type = false; //我的合规清单
          break;
        case "合规风险全景图":
          this.areas = ""; //合规领域选择的值
          this.queModule = ""; //合规子领域选择的值
          break;
        default:
          this.areas = this.$route.query.category; //合规领域选择的值
          this.queModule = this.$route.query.title; //合规子领域选择的值
          this.complianceEssentials = hotZoneCoordinates.filter((item) => item.category === this.areas); //当前合规领域对应的合规要点
          break;
      }
    },
    /**
     * 合规领域下拉选项
     * @param value 合规领域选择的值
     */
    changeComplianceArea(value) {
      this.queModule = ""; //合规子领域默认值清空
      this.complianceEssentials = hotZoneCoordinates.filter((item) => item.category === value);
    },
    /**
     * 搜索按钮
     */
    searchBtn() {
      this.page = 1; //默认页码
      this.rows = 10; //默认每页数据量
      this.search();
    },
    /**
     * 搜索查询
     */
    async search() {
      const data = {
        value: null, //接口数据
      };
      if (this.$route.query.title === "我的合规清单") {
        //当url是我的合规清单时
        const params = {
          page: this.page, //当前页码
          rows: this.rows, //每页数据量
        };
        data.value = await getMineRelatePostComplianceList(params);
      } else {
        //当url是合规风险全图
        const params = {
          areas: this.areas, //合规领域
          queModule: this.queModule, //合规子领域
          riskWarning: this.riskWarning, //合规义务
          associationNumber: this.associationNumber, //行为编号
          respPost: this.respPost, //合规责任岗位
          supervisePost: this.supervisePost, //合规监督岗位
          page: this.page, //当前页码
          rows: this.rows, //每页数据量
        };
        data.value = await getAllPostComplianceList(params);
      }
      this.tableData = data.value.data.records;
      this.total = data.value.data.total;
    },
    /**
     * 重置
     */
    reset() {
      this.page = 1; //重置页码
      this.associationNumber = ""; //重置行为编号
      this.riskWarning = ""; //合重置规义务
      this.respPost = ""; //重置合规责任岗位
      this.supervisePost = ""; //重置合规监督岗位
      this.resetParameter(); //初始化页面路径参数
      this.search(); //查询
    },
    /**
     * 格式化html
     * @param value HTML
     * @returns {*} 文本
     */
    formattingHtml(value) {
      return value
        ?.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi, "")
        .replace(/<[^>]+?>/g, "")
        .replace(/\s+/g, " ")
        .replace(/ /g, " ")
        .replace(/>/g, " ");
    },
    /**
     * 导出数据
     */
    async exportData() {
      const params = {
        areas: this.areas, //合规领域
        queModule: this.queModule, //合规要点
        associationNumber: this.associationNumber, //行为编号
        riskWarning: this.riskWarning,
        respPost: this.respPost, //合规责任岗位
        supervisePost: this.supervisePost, //合规监管岗位
      };
      const data = await download(params);
      this.downLoad(data, "合规风险清单.xlsx"); // 需要自己写文件名称和类型
    },
  },
  created() {
    //全部合规领域的值
    this.complianceArea = new Set(
      hotZoneCoordinates.map((item) => {
        return item.category;
      }),
    );
    this.jurisdiction();
  },
  mounted() {
    this.parameter(); //初始化页面路径参数
    this.search(); //初次查询
  },
};
</script>
<style lang="less" scoped>
.content {
  all: unset;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  header {
    width: 100%;
    height: 98px;
    background: #0668bc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 180px;
    color: #fff;
    .header-left,
    .header-right {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .header-left {
      img {
        width: 200px;
        height: 62px;
        margin-right: 23px;
      }
      span {
        display: block;
        font-size: 32px;
        color: #ffffff;
        font-weight: 700;
        border-left: 1px solid #fff;
        padding-left: 23px;
      }
    }
    .header-right {
      display: flex;
      column-gap: 4px;
      align-items: center;
      font-size: 16px;
      color: #ffffff;
      font-weight: 400;
      img {
        width: 20px;
        height: 20px;
      }
    }
  }
  .content-menu {
    width: 100%;
    height: 80px;
    background: #dfe9f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 20px;
    padding: 0 180px;
    .menu-input {
      display: flex;
      column-gap: 20px;
      .input-item {
        max-width: 214px;
        height: 40px;
        /deep/.el-select,
        /deep/.el-input {
          input,
          .el-input__inner,
          .el-input--suffix {
            border-radius: 21px;
            font-size: 12px;
          }
        }
      }
    }
    .menu-btn {
      display: flex;
      margin-left: 20px;
      .el-button {
        font-size: 16px;
        font-weight: 400;
      }
      .el-button--primary {
        border-radius: 21px;
        width: 80px;
        height: 40px;
        background-color: #0668bc;
        border: none;
      }
      .el-button--text {
        color: #0668bc;
      }
    }
  }
  .content-body {
    flex: 1;
    padding: 32px 180px;
    background: #f8f9fd;
    overflow-y: auto;
    .body-table {
      width: 100%;
      height: auto;
      padding: 26px 24px 0;
      background: #ffffff;
      border-radius: 8px;
      .table-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 9px;
        border-bottom: 1px solid #edeef2;
        .header-title {
          font-size: 20px;
          color: #303133;
          font-weight: 700;
          position: relative;
          &:before {
            content: "";
            display: block;
            width: 100%;
            height: 2px;
            background-color: #007bc7;
            position: absolute;
            left: 0;
            bottom: 0;
            transform: translateY(9px);
          }
        }
        .header-exportData {
          font-size: 16px;
          color: #007bc7;
          font-weight: 400;
          display: flex;
          align-items: center;
          cursor: pointer;
          img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
          }
        }
      }
      .table-form {
        padding: 16px 0;
        .particulars {
          color: #00b0ff;
          cursor: pointer;
        }
        .show-overflow {
          text-align: start;
          display: -webkit-box;
          overflow: hidden;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          /deep/span {
            font-family:
              -apple-system,
              BlinkMacSystemFont,
              Segoe UI,
              Roboto,
              "Hiragino Sans GB",
              microsoft yahei,
              "Helvetica Neue" !important;
            font-size: 14px !important;
          }
        }
        .show-overflow-10 {
          text-align: start;
          display: -webkit-box;
          overflow: hidden;
          -webkit-line-clamp: 10;
          -webkit-box-orient: vertical;
        }
        .show-overflow-1 {
          text-align: start;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .file-url {
          display: block;
          color: #00b0ff;
          cursor: pointer;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: start;
        }
        /deep/.el-table {
          th.is-center.is-leaf.el-table__cell {
            background: #e6eeff;
            color: #1a1a1a;
            border-right: 1px solid #e2e7f2;
          }
          tbody {
            tr {
              .cell {
                font-size: 14px;
              }
            }
          }
        }
        .form-paging {
          margin-top: 32px;
          display: flex;
          justify-content: end;
        }
      }
    }
  }
}
</style>
